<template>
    <div class="navbar">
        <ul style="overflow: hidden;">
            <li v-for=" nav of navList" :key="nav.id"><a @click="activeSelf(nav)"
                    :class="{ 'active': nav.id === active, 'unactive': nav.id !== active }">
                    {{ nav.label }}</a>
            </li>
        </ul>
        <!-- <div style="clear: both;"></div> -->
    </div>

</template>
<script>
import router from '@/router';

const options = {
    data() {
        return {
            navList: [
                { label: "首页", router: "/front/home", id: 1 },
                { label: "花卉大全", router: "/front/flower", id: 2 },
                { label: "农作物大全", router: "/front/crops", id: 3 },
                { label: "植物种植教学", router: "/front/edu", id: 4 },
                { label: "论坛", router: "/front/forum", id: 5 },
                { label: "种植记录", router: "/front/notes", id: 6 }
            ],
            active: 1
        }
    },
    methods: {
        activeSelf(nav) {
            this.active = nav.id;
            router.push(nav.router);
            // console.log(this.navList);
        }
    }
}

export default options;
</script>
<style>
.navbar {
    text-align: center;
    display: flow-root;
}

.navbar ul {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: auto;
}

.navbar li {
    float: left;
}

.navbar li+li {
    margin-left: 20px;
}

/* .navbar ul li a {
    background-color: #fff;
    color: #171717;
    display: block;
    font-size: larger;
    line-height: 2em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}
*/
/* .navbar ul li a:hover {
    background-color: #b7d883;
    color: #fff;
    text-decoration: none;
} */

/* .navbar ul li a:active {
    background-color: #b7d883;
    color: #fff;
    text-decoration: none;
} */

.unactive {
    cursor: pointer;
    background-color: #fff;
    color: #171717;
    display: block;
    font-size: larger;
    line-height: 2em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

.active {
    cursor: pointer;
    display: block;
    font-size: larger;
    line-height: 2em;
    padding: 4px 20px;
    white-space: nowrap;
    background-color: #b7d883;
    color: #fff;
    text-decoration: none;
}
</style>